<template>
	<main>
		<b-container fluid="xl">
			<div class="left">
				<div><img :src="logo" alt=""></div>
				<ul class="menu">
					<li><a href="#">产品</a></li>
					<li><a href="#">服务</a></li>
				</ul>
			</div>
			<div class="right">
				<button>提交工单</button>
				<button style="background: #3553E2;
					color: #fff;">联系我们</button>
			</div>
		</b-container>
	</main>
</template>

<script>
	export default {
		name: "app-header",
		data () {
			return {
				logo: require('../../assets/logo.png')
			}
		}
	}
</script>

<style scoped lang="scss">
	main {
		box-shadow: 0px 7px 7px -7px #e3e3e3;
		.container-xl {
			display: flex;
			padding: 10px;
			.left {
				flex: 1;
				display: flex;
				img {
					vertical-align: middle;
				}
				.menu {
					display: flex;
					margin: 20px 0 0 100px;
					li {
						margin-right: 45px;
						a {
							color: #000;
							text-decoration:none
						}
					}
				}
			}
			.right {
				line-height: 60px;
				button {
					background: #fff;
					width: 123px;
					font-size: 12px;
					margin-left: 20px;
					border: none;
					border-radius: 20px;
					line-height: 42px;
					outline: none;
				}
			}
		}
	}
</style>
